require('../css/info.css');
//导入axios
const axios = require('../utils/http.js')
//导入utils
const utils = require('../utils/utils')

window.onload = function () {
    let ginder = document.querySelector('#ginder');
    let ginderText = document.querySelector('#ginderText');

    let birthday = document.querySelector('#birthday');
    let birthdayText = document.querySelector('#birthdayText');

    let province = document.querySelector('#province');
    let provinceText = document.querySelector('#provinceText');

    let city = document.querySelector('#city');
    let cityText = document.querySelector('#cityText');

    let textarea = document.querySelector('textarea');
    let btn = document.querySelector('#btn');
    let area_len = document.querySelector('.area_len');
    let icon_xiangzuo1 = document.querySelector('.icon-xiangzuo1');

    //获取昵称dom
    let nameDom = document.querySelector('#js_input2');



    // 性别
    ginder.addEventListener('click', function () {
        weui.picker([{
            label: '男',
            value: '男'
        }, {
            label: '女',
            value: '女'
        }], {
                //选择男女鼠标滑动选择监听
                // onChange: function (result) {
                //     console.log(result);
                // },

                //点击确定监听
                onConfirm: function (result) {
                    console.log(result);
                    ginderText.innerText = result[0].label;
                    //将性别赋给全局gender

                },
                title: '请选择性别'
            });
    });

    // 生日
    birthday.addEventListener('click', function () {
        weui.datePicker({
            start: 1990,
            end: new Date().getFullYear(),
            // onChange: function (result) {
            //     console.log(result);
            // },

            //监听选择到的日期时间
            onConfirm: function (result) {
                console.log(result);
                let y = result[0].value;
                let m = result[1].value;
                let d = result[2].value;

                m = m < 10 ? '0' + m : m;
                d = d < 10 ? '0' + d : d;
                birthdayText.innerText = `${y}-${m}-${d}`;

            },
            title: '选择您的生日'
        });
    });

    //定义一个全局变量接受省份id
    let provinceId = '';
    //省份
    province.addEventListener('click', function () {
        axios.get('api/shared/province').then(res => {
            // console.log(res.data.data);
            let provinceList = res.data.data;
            //遍历list组装成一个picker需要的数据格式
            let provinceList1 = provinceList.map(function (item) {
                return {
                    label: item.name,
                    value: item.id
                }
            })
            //picker循环生成
            weui.picker(provinceList1, {
                //点击确定监听 渲染页面
                onConfirm: function (result) {
                    // console.log(result);

                    provinceText.innerText = result[0].label;
                    //将城市id赋给全局变量
                    provinceId = result[0].value;
                    // console.log(provinceId);

                    //省份改变必须将低级区重置数据
                    cityText.innerText = '请选择城市';
                },
                title: '请选择省份'
            });
        })
    })


    //定义全局变量接受城市id
    let cityId = '';
    //城市
    city.addEventListener('click', function () {
        if (provinceId == '') {
            utils.toast(1, '请先选择省份');
            return;
        }
        //git请求数据+参数=+传的参数
        axios.get('/api/shared/city?provinceId=' + provinceId).then(res => {
            let provinceList = res.data.data;
            // 遍历list组装成一个picker需要的数据格式
            let provinceList1 = provinceList.map(function (item) {
                return {
                    label: item.name,
                    value: item.id
                }
            })
            // picker循环生成
            weui.picker(provinceList1, {
                //点击确定监听 渲染页面
                onConfirm: function (result) {
                    cityText.innerText = result[0].label;
                    //将城市id赋给全局
                    cityId = result[0].value;
                },
                title: '请选择省份'
            });
        })
    })

    //文本框限字
    textarea.addEventListener('input', function () {
        if (textarea.value.length >= 50) {
            utils.toast(1, '签名不能超过50字')
        }
        let txet_length = textarea.value.length;
        area_len.innerText = txet_length;
    })


    //提交数据
    btn.addEventListener('click', function () {
        if (!nameDom.value) {
            utils.toast(1, '请输入昵称');
            return;
        }
        if (provinceText.innerText == '请选择省份') {
            utils.toast(1, '请填写省份');
            return;
        }


        let data = {
            //昵称
            nickName: nameDom.value
        }
        //性别
        data.gender = (ginderText.innerText == '男' ? 1 : 0);
        //省份id
        //全局变量省份id
        data.provinceId = provinceId;
        //城市id
        //全局变量城市id
        data.cityId = cityId;
        //生日
        data.birthday = birthdayText.innerText;
        //签名
        data.sign = textarea.value;
        console.log(data);
        axios.post('/api/user/changeInfo', data).then(res => {
            console.log(res);
            if (res.data.errno == 0) {
                utils.toast(0, '修改成功')
            } else {
                utils.toast(1, '请先将信息填写完整')
            }
        })
    })

    //返回到我的信息页
    icon_xiangzuo1.addEventListener('click', function () {
        location.href = './mine.html';
    })

    //数据预渲染
    function renden() {
        axios.get('/api/user/info').then(res => {
            console.log(res.data.data);
            let data = res.data.data;
            //昵称
            nameDom.value = data.nickName;
            //性别
            if (data.gender) {
                ginderText.innerText = data.gender == 1 ? '男' : '女';
            }
            //生日
            if (data.birthday) {
                birthdayText.innerText = data.birthday;
            }
            //签名
            if (data.sign) {
                textarea.value = data.sign;
            }

            //省份
            if (data.provinceId) {
                let proId = data.provinceId;
                axios.get('api/shared/province').then(res => {
                    let data = res.data.data;
                    // console.log(data);
                    //find返回满足条件的元素
                    let proObj = data.find(item => item.id == proId)
                    provinceText.innerText = proObj.name;
                })
            }

            //城市
            if (data.cityId) {
                cityId = data.cityId;
                console.log(cityId);
                axios.get('/api/shared/city?provinceId=' + data.provinceId).then(res => {
                    // console.log(res);
                    let data = res.data.data;
                    console.log(data);
                    let cityObj = data.find(item => item.id == cityId)

                    console.log(cityObj);
                    // console.log(item);
                    cityText.innerText = cityObj.name;
                })
            }
        })
    }
    renden();















}